<template>
  <div>
    <div class="ui top segment" style="text-align: center">
      <h2 class="m-text-500">标签 {{ tagName }} 下的文章</h2>
    </div>
    <BlogList :getBlogList="getBlogList" :blogList="blogList" :totalPage="totalPage"/>
  </div>
</template>

<script setup>
import BlogList from "@/components/blog/BlogList.vue";
import {computed, getCurrentInstance, nextTick, ref, watch} from "vue";
import {useRoute} from "vue-router";
import {getBlogListByTagName} from "@/api/tag";

const blogList = ref([])
const totalPage = ref(0)

const tagName = computed(() => route.params.name)
const {proxy} = getCurrentInstance()
function getBlogList(pageNum) {
  getBlogListByTagName(tagName, pageNum).then(res => {
    if (res.code === 200) {
      blogList.value = res.data.list
      totalPage.value = res.data.totalPage
      nextTick(() => {
        Prism.highlightAll()
      })
    } else {
      proxy.msgError(res.msg)
    }
  }).catch(() => {
    proxy.msgError("请求失败")
  })
}

getBlogList()

const route = useRoute()
//在当前组件被重用时，要重新获取博客列表
watch(() => route.fullPath, () => {
  if (route.name === 'tag') {
    getBlogList()
  }
})
</script>
